import { CalendarIcon } from "lucide-react"

import { Avatar, AvatarFallback, AvatarImage } from "~/registry/miami/ui/avatar"
import { Button } from "~/registry/miami/ui/button"
import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
} from "~/registry/miami/ui/hover-card"

export function HoverCardDemo() {
   return (
      <HoverCard>
         <HoverCardTrigger asChild>
            <Button variant="link">@nextjs</Button>
         </HoverCardTrigger>
         <HoverCardContent className="w-80">
            <div className="flex justify-between space-x-4">
               <Avatar>
                  <AvatarImage src="https://github.com/vercel.png" />
                  <AvatarFallback>VC</AvatarFallback>
               </Avatar>
               <div className="space-y-1">
                  <h4 className="text-sm font-semibold">@nextjs</h4>
                  <p className="text-sm">
                     The React Framework – created and maintained by @vercel.
                  </p>
                  <div className="flex items-center pt-2">
                     <CalendarIcon className="mr-2 h-4 w-4 opacity-70" />{" "}
                     <span className="text-xs text-muted-foreground">
                        Joined December 2021
                     </span>
                  </div>
               </div>
            </div>
         </HoverCardContent>
      </HoverCard>
   )
}
